<template>
    <div>
        <el-card header="水印设置" shadow="none" class="!border-none">
            <div class="">
				
                <div class="m-4 shui-div">
					<div class="shui-text">水印</div>
					<img class="img-class" :src="img1" alt="">
                    <upload
                        @change="onChange"
                        @success="onSuccess"
                        @error="onError"
                        :show-progress="true"
						:urldizhi="shuiyin"
                    >
                        <el-button type="primary" class="shui-text1">上传水印</el-button>
                    </upload>
                </div>
				<div class="m-4 shui-div">
					<div class="shui-text">盖章</div>
					<img class="img-class" :src="gai1" alt="">
				    <upload
				        @change="onChange"
				        @success="onSuccess"
				        @error="onError"
				        :show-progress="true"
						:urldizhi="gaizhang"
				    >
				        <el-button type="primary" class="shui-text1">上传盖章</el-button>
				    </upload>
				</div>
				<div class="m-4 shui-div">
					<div class="shui-text">pdf水印</div>
					<img class="shui-class" :src="pdf1" alt="">
				    <upload
				        @change="onChange"
				        @success="onSuccess"
				        @error="onError"
				        :show-progress="true"
						:urldizhi="pdfshuiyin"
				    >
				        <el-button type="primary" class="shui-text1">上传pdf水印</el-button>
				    </upload>
				</div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import Upload from '@/views/pdf/pdfs.vue'
const img=ref('https://www.zuoxinfangqiye.cn/static/shuiyin.png')
const img1=img.value + '?'+ Math.random()

const gai=ref('https://www.zuoxinfangqiye.cn/static/123.png')
const gai1=gai.value + '?'+ Math.random()

const pdf=ref('https://www.zuoxinfangqiye.cn/static/1234.png')
const pdf1=pdf.value + '?'+ Math.random()

const shuiyin='/user.user/shuiyin'
const gaizhang='/user.user/gaizhang'
const pdfshuiyin='/user.user/pdfshuiyin'
const onChange = (file: any) => {
    console.log('上传文件的状态发生改变', file)
}

const onSuccess = (file: any) => {
    console.log('上传文件成功', file)
	location.reload()
}

const onError = (file: any) => {
    console.log('上传文件失败', file)
}
</script>
<style scoped>
	.img-class{
		width: 100px;
		height: 100px;
		/* vertical-align: middle; */
	}
	.shui-class{
		width: 300px;
		height: 100px;
	}
	.shui-div{
		display: flex;
		margin-bottom: 100px;
	}
	.shui-text{
		margin-right: 40px;
		margin-top: 40px;
	}
	.shui-text1{
		margin-top: 40px;
		margin-left: 40px;
	}
</style>
